<!--
 * Copyright ©
 * #  
 * @author: zw
 * @date: 2021-11-09 
 -->

<template>
  <div class="p-3 box-border">
    <div class="relative rounded-2xl shadow-sm">
      <img class="w-full align-bottom" :src="require(`../../assets/img/${name || '白羊座'}.jpeg`)" :alt="name" />
      <div class="flex flex-col justify-center items-center absolute top-0 left-0 w-full h-full bg-gray-900 bg-opacity-40 text-white text-base" >
        <h1>{{ name || "白羊座" }}</h1>
        <p>综合指数：{{ allIndex || 0 }}</p>
      </div>
    </div>
  </div>
</template>

<script lang="ts">

import { defineComponent } from "vue";
export default defineComponent({
  name: "consCard",
  props: {
    name: String,
    allIndex: [String, Number],
  },
  setup(props, { emit, slots }) {
    return {};
  },
});
</script>

<style lang="css" scoped></style>
